<template>
  <div class="modal is-active p-2">
    <div class="modal-background"></div>
    <div class="modal-card" ref="modalCardRef">
      <header class="modal-card-head">
        <p class="modal-card-title">Delete Note?</p>
        <button @click="closeModal" class="delete" aria-label="close"></button>
      </header>
      <section class="modal-card-body">
        Are you sure you want to delete this note?
      </section>
      <footer class="modal-card-foot is-justify-content-flex-end">
        <button @click="closeModal" class="button">Cancel</button>
        <button @click="notesStore.deleteNote(noteId)" class="button is-danger">
          Delete
        </button>
      </footer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useNotesStore } from '@/stores/storeNotes';
import { onClickOutside } from '@vueuse/core';
import { onMounted, onUnmounted, ref } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  noteId: {
    type: String,
    required: true,
  },
});
const emit = defineEmits(['update:modelValue']);
const closeModal = () => {
  emit('update:modelValue', false);
};

const modalCardRef = ref<HTMLElement | null>(null);

onClickOutside(modalCardRef, closeModal);

const handleKeyboard = (e: KeyboardEvent) => {
  if (e.key === 'Escape') {
    closeModal();
  }
};

const notesStore = useNotesStore();

onMounted(() => {
  document.addEventListener('keyup', handleKeyboard);
});
onUnmounted(() => {
  document.removeEventListener('keyup', handleKeyboard);
});
</script>
